<template>
  <div id='index'>
    <div class='index-left'>
      <v-left>
      </v-left>
    </div>
    <div class='index-right'>
      <v-head></v-head>
      <div class='rightbox'>
        <router-view
          class='boxinfo'>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  components: {
    'v-left': () => import('../components/leftmenu'),
    'v-head': () => import('../components/header'),
  },
}
</script>

<style lang='less'>
.mid-enter,
.mid-leave-to {
  opacity: 0;
}
.mid-enter-active {
  transition: all 0.2s 0.2s ease-in;
}
.mid-leave-active {
  transform: translateX(20px);
  transition: all 0.2s ease-in;
}
#index {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  position: relative;
  .index-left {
    width: auto;
    height: 100%;
  }
  .index-right {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    .rightbox {
      width: 100%;
      height: 100%;
      flex: 1;
      background-color: #f0f0f0;
      position: relative;
      overflow-y: scroll;
    }
  }
}
</style>